<template>
  <div class="main-box">
    <aside class="category-wrap">
      <ul class="category-list" v-for="item in self.category" :key="item.id">
        <li @click="toLab(item.path)" :class="item.isCheck?'check':''" @mouseenter="item.isCheck = true" @mouseleave="changeTag">
          <svg class="icon" aria-hidden="true">
            <use v-if="item.isCheck" v-bind:xlink:href="item.hover"></use>
            <use v-else v-bind:xlink:href="item.icon"></use>
          </svg>
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </aside>
    <div class="article-list">
      <router-view />
    </div>
    <div class="right-container">
      <rightBox @onSubmit="onSubmit"/>
    </div>

  </div>
</template>
<script setup>
import {reactive, onMounted, watch} from "vue";
import {useRouter} from "vue-router";
import rightBox from '../common/right-container.vue'
import { useStore } from 'vuex' // 引入useStore 方法
import {GetSortForArtilcle} from '../../utils/api'

const self = reactive({
  category: [
  {
    id:0,
    name:'全部分类',
    alias:'',
    path:"/blog",
    isCheck:true,
    icon:'#icon-fenlei',
    hover:'#icon-fenlei-light'
  },
  {
    id:1,
    name:'Vue',
    alias:'vue',
    path:"/blog/vue",
    isCheck:false,
    icon:'#icon-vue',
    hover:'#icon-vue-light'
  },
  {
    id:2,
    name:'Javascript',
    alias:'javascript',
    path:"/blog/javascript",
    isCheck:false,
    icon:'#icon-js',
    hover:'#icon-js-light'
  },
  {
    id:3,
    name:'Html',
    alias:'html',
    path:"/blog/html",
    isCheck:false,
    icon:'#icon-html',
    hover:'#icon-html-light'
  },
  {
    id:4,
    name:'Docker',
    alias:'docker',
    path:"/blog/docker",
    isCheck:false,
    icon:'#icon-docker',
    hover:'#icon-docker-light'
  },
  {
    id:5,
    name:'Git',
    alias:'git',
    path:"/blog/git",
    isCheck:false,
    icon:'#icon-github',
    hover:'#icon-github-light'
  },
  {
    id:6,
    name:'个人想法',
    alias:'idea',
    path:"/blog/idea",
    isCheck:false,
    icon:'#icon-idea',
    hover:'#icon-idea-light'
  },
],
})
let router = useRouter()
//监听路由变化
watch(() =>router.currentRoute.value.path,(newValue,oldValue)=> {
  if (newValue){
    changeTag()
  }
})
onMounted(()=>{
  getSort()
})
const toLab = (path)=>{
  router.push({path:path})
}
const changeTag = () => {
  let path  = router.currentRoute.value.path
  self.category.forEach(item => {
    if (item.path === path) {
      item.isCheck = true
    } else {
      item.isCheck = false
    }
  })
}

const store = useStore()  // 该方法用于返回store 实例
const onSubmit = (val)=>{
  // console.log('来自右侧栏的点击-改变时间',val)
  store.commit('change',val)
}
const getSort = (val)=>{
  GetSortForArtilcle().then(res=>{
    if (res.code == 200){
      self.category = res.data
      changeTag()
    }

  })
}


</script>

<style scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  font-size: 26px;
}
.main-box {
  display: flex;
  padding: var(--main-padding-top) var(--main-padding) 0;
  --main-width: 70vw;
  --main-padding: 15vw;
  --main-padding-top: 40px;
  --main-blog-left: 180px;
  --main-blog-height: 750px;
}

.right-container{
  width: 300px;
  min-height:var(--main-blog-height);
  /*background-color: #fff;*/
  border-radius: 5px;
  /*border: 1px #eee solid;*/
}
.article-list {
  min-height:var(--main-blog-height);
  min-width: 780px;
  padding-left:calc(var(--main-blog-left) + 5px);
  padding-top: 15px;
  background-color: #fff;
  -webkit-box-flex: 1;
  flex: 1;
  margin-right: 15px;
  border-radius: 5px;
  /*padding: 5px;*/
}
.category-wrap {
  width: var(--main-blog-left);
  top: 70px;
  padding-top: var(--main-padding-top);
  position: fixed;
  bottom: 0;
  margin-left: 0;
  z-index: 1;
  overflow: hidden;
  background-color: #f5f6f9;
  font-family: Consolas;
}

.category-list{
  width: 100%;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  margin-top: 0;
  cursor: pointer;
  font-size: 14px;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}

.category-list li  {
  width: 100%;
  height: 54px;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  color: #4f6174;
  font-weight: bold;
  padding-left: 10px;
  margin-bottom: 3px;
  border-radius: 5px 0 0 5px;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
}
.category-list li span {
  padding-left: 15px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-list li:hover {
  font-size: 16px;
  background-color: #fff;
  box-shadow: 0 6px 10px 0 hsla(0, 0% ,92% ,0.8);
}
.check{
  font-size: 16px;
  background-color: #fff;
  box-shadow: 0 6px 10px 0 hsla(0, 0% ,92% ,0.8);
}

</style>